<style>*{ margin: 0px; padding: 0px;}
body{ background-color: #ccc;}
</style>

<template>
    <p>年龄：{{age}}</p><p>测试一个JSON：{{jsonData}}</p><button>修改一下年龄数据+1</button>
</template>


<script>
const age = ref(14);

const jsonData = ref({a:2,c:{},b:{aa:2,bb:{aaa:2}}});

console.log(document.querySelector('p'),'获取年龄dom');
//生命周期组件已经挂载了dom
onBeforeMount(()=>{
    console.log(document.querySelector('p'),'获取年龄dom');

    //点击事件
    document.querySelector('button').onclick =  ()=>{

        //修改属性        
        age.value = age.value+1;

        //先打印一次dom的html，然后在执行nextTick打印
        console.log(document.querySelector('p').innerHTML,'获取年龄dom的HTML');
        nextTick(()=>{
            console.log(document.querySelector('p').innerHTML,'获取年龄dom的HTML');
        })
        

    }
})


</script>